<template lang="pug">
  #map.map
    slot
</template>

<script>
/**
 * @name dpaMonitorMap 分区监控-地图
 * @author caixq <caixq@gddxit.com>
 * @description Arcgis 分区监控总览地图
 */
import mixins from './libs'
export default {
  name: 'MonitorMap',
  mixins,
  props: {
    // 初始化地图的配置项
    mapOptions: {
      type: Object,
      default: () => ({})
    },
    // 所有定位点
    markers: {
      type: Array,
      default: () => ([])
    },
    // 分区信息
    areas: {
      type: Array,
      default: () => ([])
    },
    dmaAreas: {
      type: Array,
      default: () => ([])
    },
    // 分区悬浮框统计信息
    areaInfo: {
      type: Object,
      default: () => ([])
    }
  },
  watch: {
    markers () {
      this.changeMarkers(this.markers)
      // this.createClusterLayer(this.markers)
    },
    dmaAreas () {
      this.drawArea(this.dmaAreas, this.dmaAreaLayer)
    },
    markersObject: {
      handler: function () {
        this.$emit('saveMarkersObject', this.markersObject)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      // 坐标点是否被点击的状态
      isClick: {}
    }
  },
  mounted () {
    this.createMap()
    this.drawArea(this.areas, this.areaLayer)
  },
  methods: {
    // 创建地图实例
    createMap () {
      /**
       * map 地图容器
       * baseLayer 底图：高德地图
       * baseLayer_st 卫星图
       * nightLayer 夜间图
       * layerN 管线图
       * areaLayer 分区图像图层
       * dmaAreaLayer dma图像图层
       * markersLayer 定位点标记图层
       * clusterLayer 点聚合图层
       */
      this.map = new this.$arcgis.Map('map', this.mapOptions)
      this.baseLayer = new this.$arcgis.GaodeLayer({id: 'baseLayer'})
      this.baseLayer_st = new this.$arcgis.GaodeLayer({layertype: 'st', id: 'baseLayer_st'})
      this.nightLayer = new this.$arcgis.ArcGISDynamicMapServiceLayer('https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer', {id: 'nightLayer'})
      this.layerN = new this.$arcgis.ArcGISDynamicMapServiceLayer('http://117.145.189.178:6080/arcgis/rest/services/KlmyJCGS0202/MapServer', {id: 'layerN'})
      this.areaLayer = new this.$arcgis.GraphicsLayer({id: 'areaLayer'})
      this.dmaAreaLayer = new this.$arcgis.GraphicsLayer({id: 'dmaAreaLayer'})
      this.markersLayer = new this.$arcgis.GraphicsLayer({id: 'markersLayer'})
      this.infoWindowLayer = new this.$arcgis.GraphicsLayer({id: 'infoWindowLayer'})
      this.map.addLayer(this.baseLayer)
      this.map.addLayer(this.baseLayer_st)
      this.map.addLayer(this.nightLayer)
      this.map.addLayer(this.layerN)
      this.map.addLayer(this.areaLayer)
      this.map.addLayer(this.dmaAreaLayer)
      this.map.addLayer(this.markersLayer)
      this.map.addLayer(this.infoWindowLayer)
      this.changeLayer(['baseLayer', 'layerN'], 'layerIds')
      this.mapOn()
      this.areaOn()
      this.markerOn()
    }
  }
}
</script>

<style lang='sass' scoped>
@import url('http://arcgis.api.dmas.cn:9002/esri/css/esri.css')
@import url('http://arcgis.api.dmas.cn:9002/dijit/themes/tundra/tundra.css')
</style>
